<template>
  <div>
    <div style="display: flex">
      <a-button size="large" class="editable-add-btn" @click="visible = true; title = '添加驾驶员'; form = {}">
        <a-icon type="plus"/>
        新增驾驶员
      </a-button>
      <a-input-search
          v-model="keyword"
          placeholder="请输入驾驶员姓名"
          enter-button="搜索驾驶员"
          style="width: 400px;margin-bottom: 20px;margin-left: 10px"
          size="large"
          @search="onSearch"
      />
      <a-button style="margin-left: 10px" size="large" type="danger" @click="reset">
        重置
      </a-button>
    </div>
    <a-table :loading="loading" :columns="columns" :data-source="data" bordered rowKey="id">
      <span slot="driving" slot-scope="driving">
        <a-tag :color="driving === 0 ? 'green' : 'cyan'">{{ driving === 0 ? '驾驶中' : '未出行' }}</a-tag>
      </span>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span>
            <a :disabled="editingKey !== ''" @click="() => edit(record)">编辑</a>
          </span>
          <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="confirm(record.id)">
            <template slot="title">
              <p> 删除驾驶员信息后将无法恢复，确定要删除吗？ </p>
            </template>
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-table>

    <a-modal
        :title="title"
        :visible="visible"
        cancelText="返回"
        okText="确认"
        @ok="submitForm"
        @cancel="cancelForm"
    >
      <a-form-model ref="form" :model="form" :rules="rules" layout="vertical">
        <a-form-model-item label="姓名" prop="name">
          <a-input v-model="form.name" placeholder="请输入司机姓名"/>
        </a-form-model-item>
        <a-form-model-item label="身份证号" prop="idCard">
          <a-input v-model="form.idCard" placeholder="请输入司机身份证信息"/>
        </a-form-model-item>
        <a-form-model-item label="联系方式" prop="phone">
          <a-input v-model="form.phone" placeholder="请输入手机号码"/>
        </a-form-model-item>
        <a-form-model-item label="驾驶证" prop="license">
          <a-select
              v-model="form.license"
              mode="default"
              style="width: 80%"
              placeholder="请选择驾驶证类型"
              option-label-prop="label"
          >
            <a-select-option :value="item"
                             :label="item"
                             v-for="(item ,index) in licenses"
                             :key="index">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="分数" prop="score">
          <a-input-number v-model="form.score" addon-before="分数" default-value="12" :min="0" :max="12"/>
        </a-form-model-item>
        <a-form-model-item label="性别" prop="gender">
          <a-radio-group v-model="form.gender">
            <a-radio value="男">男</a-radio>
            <a-radio value="女">女</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="家庭住址" prop="address">
          <a-input v-model="form.address" type="textarea"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
const columns = [
  {
    title: '名字',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '性别',
    dataIndex: 'gender',
    scopedSlots: {customRender: 'gender'},
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    scopedSlots: {customRender: 'phone'},
  },
  {
    title: '驾驶证',
    dataIndex: 'license',
    scopedSlots: {customRender: 'license'},
  },
  {
    title: '驾证分数',
    dataIndex: 'score',
    scopedSlots: {customRender: 'score'},
  },
  {
    title: '是否正在驾驶',
    dataIndex: 'driving',
    scopedSlots: {customRender: 'driving'},
  },
  {
    title: '身份证',
    dataIndex: 'idCard',
    scopedSlots: {customRender: 'idCard'},
  },
  {
    title: '家庭住址',
    dataIndex: 'address',
    scopedSlots: {customRender: 'address'},
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: {customRender: 'operation'},
  },
];

export default {
  name: 'TraDriver',
  data() {
    return {
      loading: false,
      form: {
        cacheData: [],
        name: '',
        gender: '男',
        phone: '',
        address: '',
        idCard: '',
        license: '',
        score: 12,
      },
      visible: false,
      data: [],
      columns,
      editingKey: '',
      title: '',
      keyword: '',
      rules: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'}],
        phone: [{required: true, message: '请输入联系方式', trigger: 'blur'}],
        license: [{required: true, message: '请选择驾驶证类型', trigger: 'blur'}],
        score: [{required: true, message: '请输入驾驶证分数', trigger: 'blur'}],
        gender: [{required: true, message: '请选择性别', trigger: 'blur'}],
        address: [{required: true, message: '请输入家庭地址', trigger: 'blur'}]
      },
      licenses: ['A1', 'A2', 'A3', 'B1', 'B2', 'C1', 'C2', 'C3', 'C4', 'C5', 'D', 'E', 'F', 'M', 'N', 'P']
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      this.loading = true
      this.getRequest('/api/driver/?name=' + this.keyword).then(resp => {
        if (resp) {
          if (this.keyword !== '' && resp.length === 0) this.$message.warning('未搜索到相关驾驶员')
          this.data = resp
          this.loading = false
        }
      })
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.title === '编辑驾驶员') {
            this.putRequest('/api/driver/', this.form).then(resp => {
              if (resp) {
                this.visible = false
                this.loadTableData()
                this.form = {}
              } else {
                this.visible = false
                this.form = {}
              }
            })
          } else {
            this.postRequest('/api/driver/', this.form).then(resp => {
              if (resp) {
                this.visible = false
                this.loadTableData()
                this.form = {}
              } else {
                this.visible = false
                this.form = {}
              }
            })
          }
        }
      })
    },
    cancelForm() {
      this.visible = false
      this.$refs.form.resetFields()
    },
    edit(record) {
      this.title = '编辑驾驶员'
      this.form = record
      this.visible = true
    },
    confirm(id) {
      this.deleteRequest('/api/driver/' + id).then(resp => {
        if (resp) {
          this.$message.success(resp.message)
          this.loadTableData()
        } else {
          this.$message.error(resp.message)
          this.loadTableData()
        }
      })
    },
    onSearch() {
      if (this.keyword === '') {
        this.$message.warning('请输入搜索内容')
      } else {
        this.loadTableData()
      }
    },
    reset() {
      this.keyword = ''
      this.loadTableData()
    }
  },
};
</script>

<style scoped>
.editable-add-btn {
  margin-bottom: 15px;
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>